<template>
  <div class="tab-box rules">
    <div class="rules-title">
      <span class="title">
        {{ $srv.getI18nByPath('piece.oRulesSetting.rule') }}
      </span>
      <Button size="small" @click="addRules">
        {{ $srv.getI18nByPath('piece.oRulesSetting.addrule') }}</Button
      >
    </div>

    <div class="rules-cell" v-for="(item, idx) of config" :key="idx">
      <div class="rules-cell-title">
        <span
          >{{ $srv.getI18nByPath('piece.oRulesSetting.rule')
          }}{{ idx + 1 }}</span
        >
        <div class="rules-cell-btns">
          <Button size="small" @click="addRulesCondition(idx)">
            <!-- {{ $srv.getI18nByPath('piece.oRulesSetting.addresults') }} -->
            {{
              $srv.getI18nByPath('piece.oQueryLinkSettingq.increasecondition')
            }}
          </Button>
          <Button size="small" @click="addRulesResult(idx)">
            {{ $srv.getI18nByPath('piece.oRulesSetting.addresults') }}
          </Button>
          <Icon type="md-close" @click="removeRules(idx)" />
        </div>
      </div>
      <template v-if="item.conditions">
        <div
          class="rules-cons"
          v-for="(cons, iidx) of item.conditions"
          :key="'con' + iidx"
        >
          <div class="rules-cons-title">
            {{ $srv.getI18nByPath('piece.oRulesSetting.condition') }}
            {{ iidx + 1 }}:
          </div>
          <div class="rules-cons-inputs">
            <div class="rules-cons-fields">
              <i-input
                :placeholder="
                  $srv.getI18nByPath('piece.oChartSetting.fieldname')
                "
                v-model="cons.field"
                @on-blur="saveChanges"
              >
              </i-input>
              <Select
                clearable
                :placeholder="
                  $srv.getI18nByPath('piece.oRulesSetting.conditiontype')
                "
                v-model="cons.type"
                @on-change="saveChanges"
              >
                <Option value="number">{{
                  $srv.getI18nByPath('piece.oChartSetting.number')
                }}</Option>
                <Option value="text">{{
                  $srv.getI18nByPath('piece.oRulesSetting.text')
                }}</Option>
                <Option value="date">{{
                  $srv.getI18nByPath('piece.oChartSetting.date')
                }}</Option>
                <Option value="daterange">{{
                  $srv.getI18nByPath('piece.oRulesSetting.daterange')
                }}</Option>
                <Option value="null">{{
                  $srv.getI18nByPath('piece.oRulesSetting.null')
                }}</Option>
              </Select>
            </div>
            <div
              class="rules-cons-values"
              v-if="cons.type && cons.type !== '' && cons.type !== 'null'"
            >
              <Select
                clearable
                :placeholder="
                  $srv.getI18nByPath('piece.oRulesSetting.operator')
                "
                @on-change="saveChanges"
                v-model="cons.operator"
              >
                <Option
                  v-for="(operator, oidx) of operators[cons.type]"
                  :key="oidx"
                  :value="operator.value"
                  >{{ operator.label }}</Option
                >
              </Select>
              <i-input
                @on-blur="saveChanges"
                :placeholder="
                  $srv.getI18nByPath('piece.oRulesSetting.conditionvalue')
                "
                v-model="cons.value"
              >
              </i-input>
            </div>
          </div>
          <div class="rules-cons-btns">
            <Icon type="md-close" @click="removeRulesCondition(idx, iidx)" />
          </div>
        </div>
      </template>
      <template v-if="item.results">
        <div
          class="rules-res"
          v-for="(res, iidx) of item.results"
          :key="'res' + iidx"
        >
          <div class="rules-res-title">
            {{ $srv.getI18nByPath('piece.oRulesSetting.result')
            }}{{ iidx + 1 }}:
          </div>
          <div class="rules-res-inputs">
            <div class="rules-res-type">
              <Select
                clearable
                :placeholder="
                  $srv.getI18nByPath('piece.oRulesSetting.resulttype')
                "
                v-model="res.type"
                @on-change="saveChanges"
              >
                <Option value="row">{{
                  $srv.getI18nByPath('piece.oRulesSetting.row')
                }}</Option>
                <Option value="column">{{
                  $srv.getI18nByPath('piece.oRulesSetting.column')
                }}</Option>
                <Option value="cell">{{
                  $srv.getI18nByPath('piece.oRulesSetting.cell')
                }}</Option>
              </Select>
            </div>
            <div
              class="rules-res-details"
              v-if="res.type && res.type !== '' && res.type !== 'null'"
            >
              <div v-if="res.type !== 'row'">
                <i-input
                  :placeholder="
                    $srv.getI18nByPath('piece.oChartSetting.fieldname')
                  "
                  v-model="res.field"
                  @on-blur="saveChanges"
                >
                </i-input>
              </div>
              <div>
                <span>
                  {{ $srv.getI18nByPath('piece.oMesSetting.backgroundcolor') }}
                  <ColorPicker
                    size="small"
                    @on-change="saveChanges"
                    v-model="res.backColor"
                  >
                  </ColorPicker>
                </span>
                <span>
                  {{ $srv.getI18nByPath('piece.oRulesSetting.fontcolor') }}
                  <ColorPicker
                    size="small"
                    @on-change="saveChanges"
                    v-model="res.fontColor"
                  >
                  </ColorPicker>
                </span>
              </div>
              <div>
                <span>
                  {{ $srv.getI18nByPath('piece.oRulesSetting.italic') }}
                  <iSwitch
                    size="small"
                    @on-change="saveChanges"
                    v-model="res.fontStyle"
                  >
                  </iSwitch>
                </span>
                <span>
                  {{ $srv.getI18nByPath('piece.oRulesSetting.bold') }}
                  <iSwitch
                    size="small"
                    @on-change="saveChanges"
                    v-model="res.fontWeight"
                  >
                  </iSwitch>
                </span>
                <span>
                  {{ $srv.getI18nByPath('piece.oRulesSetting.underscore') }}
                  <iSwitch
                    size="small"
                    @on-change="saveChanges"
                    v-model="res.fontDec"
                  >
                  </iSwitch>
                </span>
              </div>
              <div>
                <span>
                  {{ $srv.getI18nByPath('piece.oRulesSetting.prohibitinput') }}
                  <iSwitch
                    size="small"
                    @on-change="saveChanges"
                    v-model="res.isDisable"
                  >
                  </iSwitch>
                </span>
                <span>
                  {{ $srv.getI18nByPath('piece.oRulesSetting.openinput') }}
                  <iSwitch
                    size="small"
                    @on-change="saveChanges"
                    v-model="res.isEditable"
                  >
                  </iSwitch>
                </span>
              </div>
            </div>
          </div>
          <div class="rules-res-btns">
            <Icon type="md-close" @click="removeRulesResult(idx, iidx)" />
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Model, Vue } from 'vue-property-decorator';
import { Tsrv } from '@/services';

@Component
export default class oRulesSetting extends Vue {
  @Model('modelchange') config: any;

  mounted() {}

  // 操作符
  private operators = {
    number: [
      {
        value: '=',
        label: Tsrv.getI18nByPath('vxe.filter.equal')
      },
      {
        value: '!=',
        label: Tsrv.getI18nByPath('vxe.filter.unequal')
      },
      {
        value: '>',
        label: Tsrv.getI18nByPath('vxe.filter.more')
      },
      {
        value: '>=',
        label: Tsrv.getI18nByPath('vxe.filter.moreorequal')
      },
      {
        value: '<',
        label: Tsrv.getI18nByPath('vxe.filter.less')
      },
      {
        value: '<=',
        label: Tsrv.getI18nByPath('vxe.filter.lessorequal')
      },
      {
        value: 'between',
        label: Tsrv.getI18nByPath('vxe.filter.between')
      },
      {
        value: 'nbetween',
        label: Tsrv.getI18nByPath('vxe.filter.notbetween')
      }
    ],
    text: [
      {
        value: 'has',
        label: Tsrv.getI18nByPath('vxe.filter.include')
      },
      {
        value: 'nhas',
        label: Tsrv.getI18nByPath('vxe.filter.notinclude')
      }
    ],
    date: [
      {
        value: 'has',
        label: Tsrv.getI18nByPath('vxe.filter.include')
      },
      {
        value: 'nhas',
        label: Tsrv.getI18nByPath('vxe.filter.notinclude')
      }
    ],
    daterange: [
      {
        value: 'between',
        label: Tsrv.getI18nByPath('vxe.filter.between')
      },
      {
        value: 'nbetween',
        label: Tsrv.getI18nByPath('vxe.filter.notbetween')
      }
    ]
  };

  private saveChanges() {
    this.$emit('modelchange', this.config);
    this.$emit('change');
  }

  /**
   * 移除规则
   */
  private removeRules(index: number) {
    this.config.splice(index, 1);
    this.saveChanges();
  }

  /**
   * 移除规则条件
   */
  private removeRulesCondition(index: number, subIndex: number) {
    this.config[index].conditions.splice(subIndex, 1);
    this.saveChanges();
  }

  /**
   * 移除规则结果
   */
  private removeRulesResult(index: number, subIndex: number) {
    this.config[index].results.splice(subIndex, 1);
    this.saveChanges();
  }

  /**
   * 增加规则
   */
  private addRules() {
    this.config.push({
      conditions: [],
      results: []
    });
    this.saveChanges();
  }

  /**
   * 增加规则条件
   */
  private addRulesCondition(index: number) {
    this.config[index].conditions.push({
      field: '',
      type: '',
      operator: '',
      value: ''
    });
    this.saveChanges();
  }

  /**
   * 增加规则结果
   */
  private addRulesResult(index: number) {
    this.config[index].results.push({
      type: '',
      field: '',
      backColor: '',
      fontColor: '',
      fontStyle: false,
      fontWeight: false,
      fontDec: false,
      isDisable: false,
      isEditable: false
    });
    this.saveChanges();
  }
}
</script>

<style lang="scss" scoped>
.rules {
  .rules-title {
    width: 100%;
    height: 40px;
    .title {
      float: left;
    }
    button {
      float: right;
      margin: 6px 0;
    }
  }
  .rules-cell {
    background-color: #fdfdfd;
    padding: 10px;
    margin-bottom: 10px;
    .ivu-icon {
      cursor: pointer;
    }
    .rules-cell-title ::v-deep {
      width: 100%;
      height: 30px;
      line-height: 30px;
      .ivu-input-wrapper {
        width: 130px;
        margin-left: 15px;
        .ivu-input {
          background-color: transparent;
          border: 0;
        }
      }
      span {
        float: left;
      }
      .rules-cell-btns {
        float: right;
        button {
          margin-right: 10px;
        }
      }
    }
    .rules-cons {
      margin: 10px 0;
      display: flex;
      .rules-cons-title {
        line-height: 30px;
        flex-shrink: 0;
      }
      .rules-cons-inputs {
        margin: 0 10px;
        flex: 1;
        .rules-cons-fields {
          margin-bottom: 10px;
        }
        .rules-cons-fields,
        .rules-cons-values {
          display: flex;
          > div:first-child {
            margin-right: 10px;
          }
        }
      }
      .rules-cons-btns {
        flex-shrink: 0;
        line-height: 30px;
      }
    }
    .header-group-children {
      .rules-cons-inputs {
        margin-left: 0;
        .rules-cons-fields {
          margin-bottom: 5px;
          > div:first-child {
            margin-right: 0;
          }
        }
      }
    }
    .rules-res {
      margin: 10px 0;
      display: flex;
      .rules-res-title {
        line-height: 30px;
        flex-shrink: 0;
      }
      .rules-res-inputs {
        margin: 0 10px;
        flex: 1;
        .rules-res-type {
          margin-bottom: 10px;
        }
        .rules-res-details {
          display: flex;
          flex-direction: column;
          > div {
            display: flex;
            justify-content: space-between;
            margin: 5px 0 10px;
          }
        }
      }
      .rules-res-btns {
        flex-shrink: 0;
        line-height: 30px;
      }
    }
  }
}
</style>
